import 'package:agora_rtc_engine/agora_rtc_engine.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../../../lib_baseview/lib_baseview.dart';
import '../../../../../lib_baseview/utils/screen_utils.dart';
import '../../../../../resource/language/generated/l10n.dart';
import '../model/room_music_center_controller.dart';

class MusicMediaBarWidget extends StatelessWidget {
  final RoomMusicCenterController centerController =
      Get.find<RoomMusicCenterController>();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        _volumeWidget(context),
        Container(
            alignment: Alignment.bottomCenter,
            decoration: const BoxDecoration(
                color: Colors.white,
                border: Border(
                    top: BorderSide(color: Color(0x1E999999), width: 1))),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(height: 10),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 25),
                  child: GetBuilder<RoomMusicCenterController>(
                      id: UpdateIds.playState,
                      builder: (logic) {
                        return Row(
                          mainAxisSize: MainAxisSize.max,
                          children: [
                            Flexible(
                              child: Text(
                                  logic.currentMusic?.name ??
                                      T.current!.select_music,
                                  maxLines: 1,
                                  style: const TextStyle(
                                      color: Color(0xFF333333),
                                      fontSize: 13,
                                      fontWeight: FontWeight.w500)),
                            ),
                            const SizedBox(width: 5),
                            Text(logic.currentMusic?.singer ?? '',
                                maxLines: 1,
                                style: const TextStyle(
                                    color: Color(0xFF666666), fontSize: 11)),
                          ],
                        );
                      }),
                ),
                const SizedBox(height: 10),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 25),
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Container(
                        width: 35,
                        alignment: Alignment.centerLeft,
                        child: GetBuilder<RoomMusicCenterController>(
                            id: UpdateIds.positions,
                            builder: (logic) {
                              return Text(logic.playingTime,
                                  style: const TextStyle(
                                      color: Color(0xFF666666), fontSize: 11));
                            }),
                      ),
                      const SizedBox(width: 8),
                      Expanded(
                          child: SliderTheme(
                        data: SliderTheme.of(context).copyWith(
                            trackHeight: 2,
                            trackShape: const RoundedRectSliderTrackShape(),
                            overlayShape: const RoundSliderOverlayShape(
                                overlayRadius: 12),
                            thumbShape: const RoundSliderThumbShape(
                                enabledThumbRadius: 4)),
                        child: GetBuilder<RoomMusicCenterController>(
                            id: UpdateIds.positions,
                            builder: (logic) {
                              return Slider(
                                min: 0.0,
                                max: 1.0,
                                value: logic.playingPercent,
                                activeColor: const Color(0xFFFFAE25),
                                inactiveColor: const Color(0xFFD8D8D8),
                                onChangeEnd: (double value) async {
                                  logic.seekTo(value);
                                  logic.dragPercent = null;
                                },
                                onChanged: (double value) {
                                  logic.dragPercent = value;
                                },
                              );
                            }),
                      )),
                      const SizedBox(width: 8),
                      Container(
                          width: 35,
                          alignment: Alignment.centerLeft,
                          child: GetBuilder<RoomMusicCenterController>(
                              id: UpdateIds.playState,
                              builder: (logic) {
                                return Text(logic.currentDuration,
                                    style: const TextStyle(
                                        color: Color(0xFF666666),
                                        fontSize: 11));
                              })),
                    ],
                  ),
                ),
                const SizedBox(height: 10),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 25),
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      GestureDetector(
                        onTap: () => centerController.changePlayModel(),
                        child: Container(
                          width: 24,
                          height: 24,
                          alignment: Alignment.center,
                          child: GetBuilder<RoomMusicCenterController>(
                              id: UpdateIds.playModel,
                              builder: (logic) {
                                return image(logic.playModel.assetPath,
                                    width: 24,
                                    fit: BoxFit.fitWidth,
                                    color: const Color(0xFF999999));
                              }),
                        ),
                      ),
                      const SizedBox(width: 28),
                      const Spacer(),
                      GestureDetector(
                        onTap: () {
                          centerController.playPre();
                        },
                        child: Container(
                          width: 20,
                          height: 20,
                          alignment: Alignment.center,
                          child: image('ic_play_pre.svg',
                              height: 15, fit: BoxFit.fitHeight),
                        ),
                      ),
                      const SizedBox(width: 30),
                      GestureDetector(
                        onTap: () {
                          if (!centerController
                              .isMusicLoading(centerController.currentMusic)) {
                            centerController.playSelf();
                          }
                        },
                        child: Container(
                          width: 26,
                          height: 26,
                          alignment: Alignment.center,
                          child: GetBuilder<RoomMusicCenterController>(
                              id: UpdateIds.playState,
                              builder: (logic) {
                                if (logic.isMusicLoading(logic.currentMusic)) {
                                  return const CupertinoActivityIndicator();
                                }
                                return FutureBuilder<MediaPlayerState>(
                                  future: logic.playState(logic.currentMusic),
                                  builder: (c, shot) {
                                    if (shot.hasData) {
                                      MediaPlayerState state = shot.data!;
                                      if (state ==
                                          MediaPlayerState.playerStatePlaying) {
                                        return image('ic_play_pause.svg',
                                            height: 26, width: 26);
                                      } else {
                                        return image('ic_round_play.svg',
                                            height: 26, width: 26);
                                      }
                                    } else {
                                      return image('ic_round_play.svg',
                                          height: 26, width: 26);
                                    }
                                  },
                                );
                              }),
                        ),
                      ),
                      const SizedBox(width: 30),
                      GestureDetector(
                        onTap: () {
                          centerController.playNext();
                        },
                        child: Container(
                          width: 20,
                          height: 20,
                          alignment: Alignment.center,
                          child: image('ic_play_next.svg',
                              height: 15, fit: BoxFit.fitHeight),
                        ),
                      ),
                      const Spacer(),
                      GestureDetector(
                        onTap: () {
                          centerController.toggleVolume();
                        },
                        child: Container(
                          width: 20,
                          height: 20,
                          alignment: Alignment.center,
                          child: image('ic_music_voice.svg',
                              height: 20,
                              fit: BoxFit.fitHeight,
                              color: const Color(0xFF999999)),
                        ),
                      ),
                      const SizedBox(width: 12),
                      GestureDetector(
                        onTap: () {
                          centerController.togglePlaylist();
                        },
                        child: Container(
                          width: 20,
                          height: 20,
                          alignment: Alignment.center,
                          child: image('ic_music_playlist.svg',
                              height: 18,
                              fit: BoxFit.fitHeight,
                              color: const Color(0xFF999999)),
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(height: 20 + ScreenUtils.ins.iphoneXBottom)
              ],
            )),
      ],
    );
  }

  Widget _volumeWidget(BuildContext context) =>
      GetBuilder<RoomMusicCenterController>(
          id: UpdateIds.toggleVolume,
          builder: (logic) {
            if (!logic.showVolume) {
              return const SizedBox.shrink();
            }
            return AnimatedOpacity(
              opacity: logic.showVolume ? 1.0 : 0.0,
              duration: const Duration(milliseconds: 300),
              child: Container(
                height: 52,
                alignment: Alignment.center,
                padding: const EdgeInsets.symmetric(horizontal: 22),
                color: Colors.black.withOpacity(0.7),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Text(T.current!.music,
                        style: TextStyle(color: Colors.white, fontSize: 11)),
                    const SizedBox(width: 16),
                    Expanded(
                        child: SliderTheme(
                      data: SliderTheme.of(context).copyWith(
                        trackHeight: 2,
                        trackShape: const RoundedRectSliderTrackShape(),
                        overlayShape:
                            const RoundSliderOverlayShape(overlayRadius: 12),
                        thumbShape:
                            const RoundSliderThumbShape(enabledThumbRadius: 4),
                      ),
                      child: GetBuilder<RoomMusicCenterController>(
                          id: UpdateIds.volumeChanged,
                          builder: (logic) {
                            return Slider(
                              min: 0.0,
                              max: 1.0,
                              value: logic.volume / 100,
                              label: '${logic.dragVolume.toInt()}%',
                              activeColor: const Color(0xFFFFAE25),
                              inactiveColor: const Color(0xFFD8D8D8),
                              onChangeEnd: (double value) async {
                                await logic.setVolume((100 * value).toInt());
                                logic.dragVolume = null;
                              },
                              onChanged: (double value) {
                                logic.dragVolume = value;
                              },
                            );
                          }),
                    )),
                    const SizedBox(width: 16),
                    GetBuilder<RoomMusicCenterController>(
                        id: UpdateIds.volumeChanged,
                        builder: (logic) {
                          return Text('${logic.volume}%',
                              style: const TextStyle(
                                  color: Colors.white, fontSize: 11));
                        }),
                  ],
                ),
              ),
            );
          });
}
